HTML, CSS, Bootstrap, Php, Javascript and MySql: All you need to know to create a dynamic site
4/5
()
About this ebook
In the first place the difference between the various domains existing on the network will be explained and at a later time we will try to explain the CSS and HTML and then enter the PHP programming (server side) and JavaScript (client side) with the creation of databases via phpMyAdmin.
All this will be explained through an example website created specifically using a free Bootstrap for simplicity and basic convenience and programming a control panel with login connected to the site via database for inserting images directly from the web by uploading them to the database created with connected phpMyAdmin to the site. Obviously, after entering the world of databases and programming, you can apply this knowledge to any other need for iteration by the user required by the site project.
The aim of this study is not to create simple web pages that today can be done easily with WordPress or other easy-to-use software, but for purely educational purposes to explain the use of databases and server and client-side programming to make a dynamic otherwise static site. In summary, this work can be useful for those who want to approach the fascinating world of website programming from the beginning.
Read more from Olga Maria Stefania Cucaro
Pivot Tables for everyone. From simple tables to Power-Pivot: Useful guide for creating Pivot Tables in Excel Rating: 0 out of 5 stars0 ratingsProgramming in Visual Basic (VB): For Visual Studio Rating: 0 out of 5 stars0 ratingsTales and Imaginary Stories Rating: 0 out of 5 stars0 ratingsDisclosure on sustainable development, CSR environmental disclosure and greater value recognized to the company by users Rating: 0 out of 5 stars0 ratingsThe bankruptcy prediction model Z-ScoreM for Italian Manufacturing Listed Companies and Z'-ScoreM for Italian Industrial Company Rating: 0 out of 5 stars0 ratingsThe Value of Intangible Assets and the Human Capital Disclosure of companies specializing in IT Rating: 0 out of 5 stars0 ratingsSanta Claus and the magic violin: A Christmas fairy tale Rating: 0 out of 5 stars0 ratingsGaia the Princess and the Magic Bracelet Rating: 0 out of 5 stars0 ratings
Related to HTML, CSS, Bootstrap, Php, Javascript and MySql
Related ebooks
Learn PHP Programming in 7Days: Ultimate PHP Crash Course For Beginners Rating: 3 out of 5 stars3/5Learn PHP in 24 Hours Rating: 0 out of 5 stars0 ratingsIntroduction to PHP Rating: 3 out of 5 stars3/5Javascript For Beginners: Your Guide For Learning Javascript Programming in 24 Hours Rating: 3 out of 5 stars3/5Getting Started with Bootstrap 3.2 Rating: 0 out of 5 stars0 ratingsphpMyAdmin Starter Rating: 0 out of 5 stars0 ratingsIntroduction to PHP Web Services: PHP, JavaScript, MySQL, SOAP, RESTful, JSON, XML, WSDL Rating: 0 out of 5 stars0 ratingsJavascript Concepts: 1St Edition Rating: 0 out of 5 stars0 ratingsPHP MySQL Development of Login Modul: 3 hours Easy Guide Rating: 5 out of 5 stars5/5Advanced Web Development with React: SSR and PWA with Next.js using React with advanced concepts Rating: 0 out of 5 stars0 ratingsInstant Responsive Web Design Rating: 5 out of 5 stars5/5Wordpress Web Application Development - Third Edition Rating: 0 out of 5 stars0 ratingsIntroduction to HTML & CSS Rating: 4 out of 5 stars4/5Learning PHP 7 High Performance Rating: 0 out of 5 stars0 ratingsWordPress Web Application Development Rating: 5 out of 5 stars5/5Exploring Web Components: Build Reusable UI Web Components with Standard Technologies (English Edition) Rating: 0 out of 5 stars0 ratingsResponsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsWeb Design and Development: Website Technologies Fundamentals Rating: 0 out of 5 stars0 ratingsPHP & MySQL Practice It Learn It Rating: 3 out of 5 stars3/5P.H.P Simple C.R.U.D Design Rating: 4 out of 5 stars4/5Bootstrap 4 Quick Start: A Beginner's Guide to Building Responsive Layouts with Bootstrap 4 Rating: 0 out of 5 stars0 ratingsMastering Sass Rating: 0 out of 5 stars0 ratingsIntroduction to PHP, Part 1, Second Edition Rating: 0 out of 5 stars0 ratingsWordPress Websites: Beginner's Guide to Easily Building a Website & Customizing It With Themes and Plugins Rating: 0 out of 5 stars0 ratingsAdvance WORDPRESS Mastery Kit WITH ONLINE VIDEOS Rating: 0 out of 5 stars0 ratingsMastering Bootstrap 4 Rating: 5 out of 5 stars5/5The PHP Workshop: Learn to build interactive applications and kickstart your career as a web developer Rating: 0 out of 5 stars0 ratingsMake Bootstrap Themes Rating: 0 out of 5 stars0 ratings
Internet & Web For You
SEO For Dummies Rating: 4 out of 5 stars4/5The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5The $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5The Logo Brainstorm Book: A Comprehensive Guide for Exploring Design Directions Rating: 4 out of 5 stars4/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Coding For Dummies Rating: 5 out of 5 stars5/5Hacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5Six Figure Blogging In 3 Months Rating: 4 out of 5 stars4/5Cybersecurity For Dummies Rating: 4 out of 5 stars4/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsWireless Hacking 101 Rating: 4 out of 5 stars4/5Create Something Awesome: How Creators are Profiting from Their Passion in the Creator Economy Rating: 0 out of 5 stars0 ratingsHow to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsHow To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5Remote/WebCam Notarization <<Extended>> Commonwealth of Virginia Rating: 0 out of 5 stars0 ratingsSix Figure Blogging Blueprint Rating: 5 out of 5 stars5/5Get Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsHow To Start A Podcast Rating: 4 out of 5 stars4/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5
Reviews for HTML, CSS, Bootstrap, Php, Javascript and MySql
1 rating0 reviews
Book preview
HTML, CSS, Bootstrap, Php, Javascript and MySql - Olga Maria Stefania Cucaro
Introduction
This book aims to initiate those who want to independently create a website, to the world of domains and programming linked to the web. The author conceived this work as a scientific work intended for educational and study use for all those who approach the study of client-side and server-side programming.
In the first place the difference between the various domains existing on the network will be explained and at a later time we will try to explain the CSS and HTML and then enter the PHP programming (server side) and JavaScript (client side) with the creation of databases via phpMyAdmin.
All this will be explained through an example website created specifically using a free Bootstrap for simplicity and basic convenience and programming a control panel with login connected to the site via database for inserting images directly from the web by uploading them to the database created with connected phpMyAdmin to the site. Obviously, after entering the world of databases and programming, you can apply this knowledge to any other need for iteration by the user required by the site project.
The aim of this study is not to create simple web pages that today can be done easily with WordPress or other easy-to-use software, but for purely educational purposes to explain the use of databases and server and client-side programming to make a dynamic otherwise static site. In summary, this work can be useful for those who want to approach the fascinating world of website programming from the beginning.
GENERAL PART
Difference between sites and blogs
The blog is updated daily, or weekly not new news which the blogger has decided to talk about in the blog built ad hoc (cooking blog, programming, etc.). The site can only be updated when company information changes or in the case of a portfolio or e-commerce site when products or prices change.
Sites can be both static and dynamic, while a blog must necessarily be dynamic as it must be continuously updated. Static sites are created in html and css and are only editable by an expert through the source files, while dynamic sites have many iterations with the user that modify the pages automatically. Examples of dynamic sites are e-commerce sites and blogs that allow you to select what interests you or interact with the site in various ways.
To create dynamic and responsive sites or blogs we now use hosting with simple control panels also called Content Management System (CMS) such as the open source Wordpress software. This is the simplest method to continuously and easily create and update your site without having any specific knowledge.
What are domains and hosting
A domain is required to make a website public. The domain is made available by a provider and can be free or paid. Usually the top-level domains are those that identify a territory, while those that interest users are those of the second, third and fourth level.
The second level domains are those that we will usually find for a fee and identify the user (for example www.user.com). The second and third level ones are mostly available for free on the web (eg we can have www.altervista.user.com). The second, third and fourth level domains can also be connected to your site (eg we can have blog.user.com).
When we want to put web pages online, we must also request a hosting (web space), from the English to host
which means to host
. Often the provider we choose will give us both the domain and the free or paid hosting. This depends on the conditions offered by the provider.
In the example that we will explain later in this book, we have chosen a hosting with a free third level domain from Altervista.
Obviously, if you are a programmer and you are selling a site to a customer, you will not be able to use a third level domain, but you will use a second level domain with paid hosting that you will transfer to the company after creating the site or that you will manage annually. This will depend on the contract drawn up with the customer.
As in everything related to programming, the choice of paid or free hosting depends on the final result you want to achieve. Paid hosting has additional services and various e-mail addresses associated with the domain, furthermore being composed only of the name of the company or of the person it could be facilitated in the Google search.
How to create pages without knowing languages with WordPress
Wordpress is an open source software that allows you to dynamically create and update your blog or site. Through a very intuitive CMS (Content Management System) it allows you to add textual content, videos and images without working on the code directly on the pages of our site. It also offers the possibility if you know the basics of html language, to modify it directly from the source code. Obviously this platform offers many possibilities to use widgets and templates to be able to have, at the end of the creation work, a personalized blog, but not as much as it would allow us to make a personalized creation with html, php, javascript and mysql code where we can create our own. site from scratch with no pre-made themes. To customize the site more based on a theme, I can add a CSS to the
Wordpress is still an excellent choice and also allows us to insert php code. In this case I can go to the theme editor aspect and enter the theme functions a file called function.php. This is not very recommendable as all additional code will be lost when the theme is updated.
Instead, there is a plug-in to insert the php code which is called Code Snippets
. After installation and activation, I will find Snippets on the main menu and I will be able to use some existing files or create new ones.
How to create pages using HTML and CSS
When we write a site in html, our PC (CLIENT) communicates with another computer called SERVER which provides a response to the Client.
The client makes a request to the Server which responds by interpreting the html language and viewing the site.
To create web pages you can use a simple wordpad or notepad or the more advanced Notepad which also highlights the writing errors of the instructions.
HTML represents the structure of the site, while CSS can be considered the dress (the graphics) of the site.
HTML is a markup language and not a programming language. In fact, the browser translates the code and allows us to view the web page.
The tags are essential to give a structure to the page which will then be translated by the browser.
Example of element or tag:
Page title
Paragraph title
Page title
If we copy this code on a note sheet and save it with an html extension, we will see that our raw site will appear.
We then save the file with the html extension. We will call it index.html because it is the name that the browser will recognize as the main page of our site.
If we double click on the desktop file it will display on the browser:
You see that the browser recognizes the tags and formats our text as we wanted. This is a simple example of how the browser reads html pages.
The browser then translates the tags into elements of the web page.
From chrome if we type:
Ctrl + u will display the html code of any web page.
Index.html:
Web Design Example
Body of the site
Example Web Deisgner, Copyright & copy; 2022
Web Design Example
Body of the site
Example Web Deisgner, Copyright & copy; 2022
Obviously, if we do not insert the html file of the contacts, an error page will appear.
We must therefore create the contact page.html
Web Design Example
You can find us via xxxxxx n. xxx
our number is xxxx
Example Web Deisgner, Copyright & copy; 2022
Obviously, a precise page style will be missing which can be inserted directly into the html page or in a particular file defined style.css which will contain the page style file as we will see later.
Now that the files have increased, let's create a special folder for the site that we will call base site and where we will insert the file with the .css extension and the files with the.html extension to view the site, click twice on the index.html page. The style file will also be written to the notepad for simplicity and saved with the .css extension as follows.
Style.css:
background {
font: 15px / 1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: # ff55dc;
}
/ * Global * /
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/ * Header ** /
header {
background: blue;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: # e8491d 3px solid;
}
header to {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: # ff6940;
font-weight: bold;
}
header a: hover {
color: #cccccc;
font-weight: bold;
}
footer {
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: orange;
text-align: center;
}
Index.html:
stylesheet href = ./ style.css
>
Web Design Example
Body of the site
Example Web Deisgner, Copyright & copy; 2022
Contact.html:
stylesheet href = ./ style.css
>
Web Design Example
You can find us via xxxxxx n. xxx
our number is xxxx
Example Web Deisgner, Copyright & copy; 2022
All the html pages that we insert in the folder will have the same formatting inserted in the style.css style sheet
Another choice would be to use other resources available online to create or edit CSS style sheets.
There are some online tools you can use for this, such as:
https://www.toptal.com/developers/css3maker/
https://css3generator.com/
https://webcode.tools/generators/css/background-color
https://css-generator.netlify.app/
Obviously, in addition to the css style sheet, we must create the html files to write the content of the site.
In this regard we can also use the Amaya software with which we can create both the css and html file.
https://amaya.it.uptodown.com/windows
Nowadays, creating responsive sites that work on any device and with various links and pages can be very complex and take a lot of time so it can be useful to download already prepared models such as bootstraps from the internet or download examples of complete sites directly from the internet. to be modified at will, always respecting the licenses available to the user.
Dynamic and static sites
Static sites are the sites that in past years represented most of the sites on the internet. Today the situation is changing dramatically and static sites are in less and less quantity.
The static site is the simplest to create and provides an unchanged site up to the changes made by the programmer through code. The dynamic site is more sophisticated and requires level programming within the site pages